<template>
  <div class="header">
    <div class="top">
      <div class="home" @click="goToBest">
        <img src='../../assets/img/icon-home.png' />
      </div>
      <div class="category" @click="goToCategory">
        <img src='../../assets/img/icon-cate.png' />
      </div>
      <div class="grow"></div>
      <div class="search" @click="goToSearch">
        <img src='../../assets/img/search.png' />
      </div>
      <div class="cart" :class="{'cart-on': cartHasData}" @click="goToCart">
        <img src="../../assets/img/cart.png">
      </div>
    </div>
    <div class="tabs">
      <div class="item" :class="{'item-cur': actived===0}" @click="tabClicked('best')">商店</div>
      <div class="item" :class="{'item-cur': actived===1}" @click="tabClicked('brand')">动态</div>
      <div class="item" :class="{'item-cur': actived===2}" @click="tabClicked('class')">城市公开课</div>
      <div class="item" :class="{'item-cur': actived===3}" @click="tabClicked('life')">TA风尚</div>
      <div class="item" :class="{'item-cur': actived===4}" @click="tabClicked('user')">我的</div>
    </div>
  </div>
</template>

<script>
import { getCartProduct } from '../../network/cart'
import { EVN } from '../../config/global'

export default {
  name: 'Header',
  props: {
    actived: Number,
  },
  data(){
    return {
      cartHasData: false,
    }
  },
  mounted() {
    // if(this.title!=='登录'){
    //   this.getCartData()
    // }
    if(localStorage.getItem('userKey')){
      this.getCartData()
    }
  },
  methods: {
    goToBest(){
      this.$router.push('/best')
    },
    tabClicked(page){
      this.$router.push(page)
    },
    goToCategory(){
      this.$router.push('category')
    },
    goToCart(){
      this.$router.push('/cart')
    },
    goToSearch(){
      this.$router.push('/search')
    },
    getCartData(){
      let requestData = {
        userkey: localStorage.getItem('userKey'),
      }
      getCartProduct(requestData, list => {
        if(list.length){
          this.cartHasData = true
        }
      })
    },
  },
}
</script>

<style scope>
.header{
  color: #ffffff;
  background-color: #000000;
}
.header .top{
  display: flex;
  justify-content: space-between;
  height: 50px;
  align-items: center;
}
.header .top .home{
  height: 50px;
  padding: 0 10px 0 20px;
}
.header .top .home img{
  width: 34px;
  margin-top: 8px;
}
.header .top .category{
  height: auto;
  padding: 0 5px;
  height: 50px;
}
.header .top .category img{
  width: 34px;
  margin-top: 8px;
}
.header .top .grow{
  flex-grow: 1;
}
.header .top .search{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 5px;
}
.header .top .search img{
  width: 23px;
}
.header .top .cart{
  position: relative;
  width: 40px;
  height: 45px;
  margin-right: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.header .top .cart-on:after{
  display: block;
  content: '';
  position: absolute;
  right: 6px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /* border: 1px solid #ffffff; */
  background-color: #d50721;
  z-index: 9;
}
.header .tabs{
  display: flex;
  justify-content: space-between;
}
.header .tabs .item{
  /* padding: 0 20px; */
  height: 40px;
  line-height: 40px;
  justify-content: stretch;
  font-size: 14px;
  width: 17%;
  text-align: center;
}
.header .tabs .item:nth-child(3){
  width: 26%;
}
.header .tabs .item:nth-child(4){
  width: 23%;
}
.header .tabs .item-cur{
  font-size: 20px;
  font-weight: bold;
}
</style>